/* 公共样式 */
@font-face {
    font-family: yourDaddy;
    src: url("../fonts/MFShangHei-Regular.woff");
}


.middle-box {
    width: 1190px;
    height: 100%;

    /* 水平居中 */
    margin: 0 auto;
}

.left-box {
    float: left;
}

.right-box {
    float: right;
}

/* 999 666 */
.gray-6 {
    color: #666;
}

.gray-9 {
    color: #999;
}

.icon-orange {
    color: #ffb500;
}

.icon-green {
    color: #00bf96;
}

.icon-pink {
    color: #ff4081;
}

.icon-blue {
    color: #03a9f4;
}

.iconfont.small {
    font-size: 15px;
    position: relative;
    top: -1px;
}

/* 所有的orange-pointer元素被鼠标覆盖时变色变手 */
.orange-pointer:hover {
    color: #fe8c00;
    cursor: pointer;
}

.red-pointer:hover {
    color: red;
    cursor: pointer;
}

.pointer {
    cursor: pointer;
}


/* 清除浮动3：使用伪元素 */
/* 在父元素内部的末尾放置一个伪元素 */
.clearfix::after {
    /* 内容为空气且不可见 */
    content: "";
    visibility: hidden;

    /* 是一个块级元素 */
    display: block;

    /* 清除左右浮动 */
    clear: both;
}

/* 绝对定位到父盒子的四角 */
.lt {
    position: absolute;
    left: 0;
    top: 0;
}

.lb {
    position: absolute;
    left: 0;
    bottom: 0;
}

.rt {
    position: absolute;
    right: 0;
    top: 0;
}

.rb {
    position: absolute;
    right: 0;
    bottom: 0;
}

/* 单行文本，超出部分省略号 */
.danhang-shengluehao {
    /* 文本不折行 + 省略号 */
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}


/* 标准圆角小按钮 */
.btn-yuanjiao {
    width: 120px;
    height: 40px;
    box-sizing: border-box;
    border: 1px solid #e5e5e5;
    border-radius: 20px;

    cursor: pointer;
}

/* 白底灰边锁定尺寸的盒子 */
.white-gray-box {
    background-color: #fff !important;
    border: 1px solid #e5e5e5 !important;
    box-sizing: border-box;
}

/* 提取电影 + 民宿 + 喜欢的共性 */
.bankuai-box {
    /* 白底灰边带圆角 */
    background-color: #fff !important;
    border: 1px solid #e5e5e5;
    border-radius: 5px;

    /* 怪异盒模型 => 根据设计图锁死盒子的尺寸 */
    box-sizing: border-box;

    // 溢出区域隐藏
    overflow: hidden;

    /* 标题盒子 */
    >.title-box {
        // 高度相同
        height: 44px;

        // 都有背景颜色（将来具体实现盒子可以自己覆盖）
        background-color: red;

        /* ul下的所有li左浮 最后一个右浮 */
        >ul {
            height: 100%;
            padding: 0 18px;

            >li {
                height: 100%;
                line-height: 44px;
                float: left;
                color: white;
                margin-right: 10px;
            }

            >li:hover {
                cursor: pointer;
            }

            >li:first-child {
                margin-right: 20px;
                font-family: yourDaddy;
            }

            >li:last-child {
                float: right;

                >i {
                    margin-left: -5px;
                }
            }
        }
    }

    /* 内容盒子 */
    >.content-box {

        /* 浮动实现横排折行 */
        // >ul{
        //     >li{
        //         float: left;
        //         background-color: red;
        //         width: 18%;
        //         height: 100px;
        //         margin-left: 20px;
        //         margin-top: 20px;
        //     }
        // }

        /* 弹性盒实现横排折行 */
        >ul {
            padding: 20px;

            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: space-between;

            >li {
                background-color: red;
                width: 18%;
                height: 100px;
                margin-bottom: 20px;
            }
        }
    }

}